<!DOCTYPE html>
<html>
<head>
    <title>我是“端阳王”</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body id='body' style="margin: 0px;padding: 0px;position:relative;background-image: url('/Public/projects/facego/dw_BG2.jpg');
    background-repeat:no-repeat;background-size: 100% 100%;">
<img src="" style="position:fixed;opacity:0;top:-2000px;" id="image">
<img src="" style="position:absolute;top:0px;left:0px;opacity:0;display: none" id="image1">
<img src="" style="position:absolute;top:0px;left:0px;opacity:0;display: none" id="image2">
<img src="" alt="" id="image3" style="position:absolute;top:0px;left:0px;opacity:0;display: none">
<img src="" alt="" id="image4" style="position:absolute;left:15%;">
<img src="/Public/projects/facego/wait.png" alt="" style="position:absolute;top:200px;z-index:200;" id="img_wait">
<div class="mask" id="mask" style="display: none">
    <img src="/Public/projects/facego/img_share.png">
</div>
<!--<img src="/Public/projects/facego/save.png" style="position:fixed;left:30%;width:150px;z-index:201;bottom: 22%;">-->
<img src="/Public/projects/facego/dw_again.png" onclick="window.location.href='/Wap/Applications/dwfaceindex';return false;"
     style="position:fixed;left:8%;width:40%;z-index:201;bottom:13%">
<img src="/Public/projects/facego/dw_show.png" style="position:fixed;right:8%; width:40%; z-index:201;bottom:13%" onclick="$('#mask').show();">
<img src="/Public/projects/facego/dw_study.png" onclick="window.location.href='http://www.zjwhlt.cn/ctjr/201806/t20180607_7489040.shtml';return false;"
     style="position:fixed;left:8%;width:40%;z-index:201;bottom:5%">
<img src="/Public/projects/facego/dw_test.png" style="position:fixed;right:8%; width:40%; z-index:201;bottom:5%"
     onclick="window.location.href='http://www.zjwhlt.cn/ltjmidx2018/201805/t20180531_7435397.shtml';return false;">

<?php
            foreach($landmark as $key=>$val){
}
?>
<canvas id="canvas" style="top: 0px;left: 0px;position:absolute;display: none"></canvas>
<canvas id="canvas1"style="top: 0px;left: 0px;position:absolute;display: none"></canvas>
<audio id="bgm" src="/Public/projects/facego/assets/media/bgm.mp3" loop="loop">
    您的浏览器不支持 audio 标签。
</audio>
<div class="ico-music1 ico"></div>
</body>
<style>
    .border1{
        -webkit-transform: translateY(105%);
        transform: translateY(105%);
        -webkit-transition:2s all ease;
        transition:2s all ease;
    }
    .mask{
        background-color: rgba(0,0,0,.7);
        z-index: 1000;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
    .mask img{
        position: absolute;
        top: 0;
        right: 0;
    }
    .ico-music1 {
        width: 22.66666667px;
        height: 26.66666667px;
        position: fixed;
        z-index: 9;
        top: 20px;
        right: 10px;
        background-image: url(/Public/projects/facego/assets/ui/dw_ico_music1.png);
    }
    .ico {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .animRotate {
        animation-duration: 4s;
        animation-iteration-count: 9999;
        animation-delay: 0s;
        animation-timing-function: linear;
        -webkit-animation-duration: 4s;
        -webkit-animation-iteration-count: 9999;
        -webkit-animation-delay: 0s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-name: animRotate;
        -moz-animation-name: animRotate;
        -o-animation-name: animRotate;
        animation-name: animRotate;
    }
    @-webkit-keyframes animRotate {
        0% {
            -webkit-transform-origin: center;
            transform-origin: center;
        }
        33% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 120deg);
            transform: rotate3d(0, 0, 1, 120deg);
        }
        66% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 240deg);
            transform: rotate3d(0, 0, 1, 240deg);
        }
        100% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
        }
    }
    @keyframes animRotate {
        0% {
            -webkit-transform-origin: center;
            transform-origin: center;
        }
        33% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 120deg);
            transform: rotate3d(0, 0, 1, 120deg);
        }
        66% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 240deg);
            transform: rotate3d(0, 0, 1, 240deg);
        }
        100% {
            -webkit-transform-origin: center;
            transform-origin: center;
            -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
        }
    }
</style>
<script src="/Public/projects/facego/libs/jquery-3.1.1.min.js"></script>
<!--WeiXin-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<!--BaiDu 统计-->
<script src="/Public/js/common/baidutongji.js"></script>
<script>
    var my_music_play = false;
    function toggleMusic(boo) {
        var music = $(".ico-music1");
        if(!boo){
            music.removeClass("animRotate");
            $("#bgm")[0].pause();
        }else{
            music.addClass("animRotate");
            $("#bgm")[0].play();
        }
    }
    $(".ico-music1").click(function () {
        toggleMusic(!$(this).hasClass("animRotate"));
    });

    setTimeout(function(){
        if(typeof WeixinJSBridge == 'undefined' ){
            toggleMusic(true)
            return
        }
        WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
            toggleMusic(true)
        })
    },2000);
    $('#mask').click(function(){
        $(this).hide();
    })
    document.getElementById("img_wait").width = document.body.clientWidth;
    var code = <?php echo $code; ?>;
    if(code == 1){
        document.getElementById("img_wait").style.display = 'none';
        document.getElementById("image").src = "<?php echo $face ? $face : ''; ?>";
        document.getElementById("image1").src = "<?php echo $img_data['img_bg'] ? $img_data['img_bg'] : '';?>";
        document.getElementById("image2").src = "<?php echo $img_data['imge_url'] ? $img_data['imge_url'] : '';?>";
        var total = 0;
        document.getElementById("image1").onload = function(){
            total += 1;
            if(total == 3){
                go_canvas();
            }
        }
        document.getElementById("image").onload = function(){
            total += 1;
            if(total == 3){
                go_canvas();
            }
        }
        document.getElementById("image2").onload = function(){
            total += 1;
            if(total == 3){
                go_canvas();
            }
        }
        function go_canvas(){
            var canvas1 = document.getElementById("canvas1").getContext("2d");
            var image1 = document.getElementById("image1");
            var width = 443;
            var height = 697;
            document.getElementById("canvas1").width = width;
            document.getElementById("canvas1").height = height;
            canvas1.clearRect(0, 0, width, height);
            var face_left = <?php echo $img_data['face_left']? $img_data['face_left'] : 0;?>;
            var face_top = <?php echo $img_data['face_top'] ? $img_data['face_top'] : 0;?>;
            var face_width = <?php echo $img_data['face_width'] ? $img_data['face_width'] : 0;?>;
            var face_heigth = <?php echo $img_data['face_height'] ? $img_data['face_height'] : 0;?>;
//            canvas1.drawImage(image1, 0, 0, image1.width, image1.height, 30, 30, 400, 600);

            canvas1.globalAlpha = 1;
            canvas1.globalCompositeOperation="source-over";

            var canvas = document.getElementById("canvas").getContext("2d");
            var image = document.getElementById("image");
            document.getElementById("canvas").width = image.width;
            document.getElementById("canvas").height = image.height;
            canvas.clearRect(0, 0, image.width, image.height);
            canvas.beginPath();
            var minx = <?php echo $landmark[0]['x'] ? $landmark[0]['x'] : 0;?>;
            var maxx = <?php echo $landmark[0]['x'] ? $landmark[0]['x'] : 0;?>;
            var miny = <?php echo $landmark[0]['y'] ? $landmark[0]['y'] : 0;?>;
            var maxy = <?php echo $landmark[0]['y'] ? $landmark[0]['y'] : 0;?>;
            var x,y;
        <?php for($i=0; $i<13; $i++){?>
                canvas.lineTo(<?php echo $landmark[$i]['x'] ? $landmark[$i]['x'] : 0;?>, <?php echo $landmark[$i]['y'] ? $landmark[$i]['y'] : 0;?>);
                x = <?php echo $landmark[$i]['x'] ? $landmark[$i]['x'] : 0;?>;
                y = <?php echo $landmark[$i]['y'] ? $landmark[$i]['y'] : 0;?>;
                if(x > maxx){
                    maxx = x;
                }
                if(x < minx){
                    minx = x;
                }
                if(y > maxy){
                    maxy = y;
                }
                if(y < miny){
                    miny = y;
                }
            <?php }?>

            x = <?php echo $landmark[43]['x'] ? $landmark[43]['x'] : 0;?>;
            y = <?php echo $landmark[43]['y'] ? $landmark[43]['y'] : 0;?>;
            if(x > maxx){
                maxx = x;
            }
            if(x < minx){
                minx = x;
            }
            if(y > maxy){
                maxy = y;
            }
            if(y < miny){
                miny = y;
            }
            canvas.lineTo(x, y);

            x = <?php echo $landmark[42]['x'] ? $landmark[42]['x'] : 0;?>;
            y = <?php echo $landmark[42]['y'] ? $landmark[42]['y'] : 0;?>;
            if(x > maxx){
                maxx = x;
            }
            if(x < minx){
                minx = x;
            }
            if(y > maxy){
                maxy = y;
            }
            if(y < miny){
                miny = y;
            }
            canvas.lineTo(x, y);

            x = <?php echo $landmark[41]['x'] ? $landmark[41]['x'] : 0;?>;
            y = <?php echo $landmark[41]['y'] ? $landmark[41]['y'] : 0?>;
            if(x > maxx){
                maxx = x;
            }
            if(x < minx){
                minx = x;
            }
            if(y > maxy){
                maxy = y;
            }
            if(y < miny){
                miny = y;
            }
            canvas.lineTo(x, y);

            x = <?php echo $landmark[24]['x'] ? $landmark[24]['x'] : 0;?>;
            y = <?php echo $landmark[24]['y'] ? $landmark[24]['y'] : 0?>;
            if(x > maxx){
                maxx = x;
            }
            if(x < minx){
                minx = x;
            }
            if(y > maxy){
                maxy = y;
            }
            if(y < miny){
                miny = y;
            }
            canvas.lineTo(x, y);

            x = <?php echo $landmark[23]['x'] ? $landmark[23]['x'] : 0;?>;
            y = <?php echo $landmark[23]['y'] ? $landmark[23]['y'] : 0;?>;
            if(x > maxx){
                maxx = x;
            }
            if(x < minx){
                minx = x;
            }
            if(y > maxy){
                maxy = y;
            }
            if(y < miny){
                miny = y;
            }
            canvas.lineTo(x, y);
            x = <?php echo $landmark[22]['x'] ? $landmark[22]['x'] : 0;?>;
            y = <?php echo $landmark[22]['y'] ? $landmark[22]['y'] : 0;?>;
            if(x > maxx){
                maxx = x;
            }
            if(x < minx){
                minx = x;
            }
            if(y > maxy){
                maxy = y;
            }
            if(y < miny){
                miny = y;
            }
            canvas.lineTo(x, y);
            canvas.lineTo(<?php echo $landmark[0]['x'] ? $landmark[0]['x'] : 0;?>, <?php echo $landmark[0]['y'] ? $landmark[0]['y'] : 0;?>);
            canvas.clip();
            canvas.closePath();

            canvas.drawImage(image,0,0);
            var imgData = canvas.getImageData(0,0,document.getElementById("canvas").width,document.getElementById("canvas").height);
            /*imgData = median(document.getElementById("canvas").width,document.getElementById("canvas").height,
                imgData,document.getElementById("canvas").width,document.getElementById("canvas").height);*/

            canvas.putImageData(imgData,0,0);
            var imgsrc = document.getElementById("canvas").toDataURL();
            document.getElementById("image3").width = document.getElementById("image").width;
            document.getElementById("image3").height = document.getElementById("image").height;
            document.getElementById("image3").src = imgsrc;
            image = document.getElementById("image3");
            image.onload = function(){
                canvas1.drawImage(this,minx, miny, (maxx - minx), (maxy - miny), face_left,face_top,face_width,face_heigth);
                canvas1.globalAlpha = 1;
                canvas1.globalCompositeOperation="source-over";
                image = document.getElementById("image2");
                canvas1.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
                imgsrc = document.getElementById("canvas1").toDataURL();
                document.getElementById("image4").width = Math.round(window.innerWidth * 0.70);
                document.getElementById("image4").src = imgsrc;
                document.getElementById("image4").onload = function(){
                    document.getElementById("image4").style.top = "-" + document.getElementById("image4").height + "px";
                    document.getElementById("image4").className = 'border1';
                }
            }
        }
    }
    $(function(){
        wxShareConfig();
    });
    function getWxShare(cb) {
        $.ajax({
            url:"weixinShare",
            typ:'get',
            data:{
                url: 'http://esm.zbxinmeiti.com/Wap/Applications/dwfacego'
            },
            success:function (result) {
                if(result.status != 1){
                    //alert(result.msg);
                }else{
                    cb && cb(result);
                }
            }
        });
    }
    function wxShareConfig(){
        getWxShare(function (ws) {
            wx.config({
                debug: false,
                appId: ws['appId'],
                timestamp: ws['timestamp'],
                nonceStr: ws['nonceStr'],
                signature: ws['signature'],
                jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']
            });
            wx.error(function(res){
                console.log(res);
            });
            wx.ready( function( e ){
                wx.onMenuShareAppMessage({
                    title: "我是“端阳王”",
                    desc: "端午习俗以雄黄抹额头，动动手指让自己化身“端阳王”吧！",
                    link: "http://" + window.location.host + "/Wap/Applications/dwfaceindex",
                    imgUrl: "http://" + window.location.host + "/Public/projects/facego/dwshare.png",
                    type: 'link',
                    dataUrl: '',
                    success: function () {},
                    cancel: function () {}
                });
                wx.onMenuShareTimeline({
                    title: "端午习俗以雄黄抹额头，动动手指让自己化身“端阳王”吧！",
                    link: "http://" + window.location.host + "/Wap/Applications/dwfaceindex",
                    imgUrl: "http://" + window.location.host + "/Public/projects/facego/dwshare.png",
                    success: function () {},
                    cancel: function () {}
                });
            })
        });
    }
    function median(filterWidth, filterHeight, dataArray, width, height) {
        var temp = [];
        for(var i=0; i<dataArray.length; i++) {
            temp.push(dataArray[i]);
        }
        for(var x=(filterWidth-1)/2; x<width-(filterWidth-1)/2; x++) {
            for(var y=(filterHeight-1)/2; y<width-(filterHeight-1)/2; y++) {
                var tempArray = [];
                for(var i=-(filterWidth-1)/2; i<=(filterWidth-1)/2; i++) {
                    for(var j=-(filterHeight-1)/2; j<=(filterHeight-1)/2; j++) {
                        tempArray.push(temp[(j+y)*width+i+x]);
                    }
                }
                // 泡沫排序，找出中值
                do {
                    var loop = 0;
                    for(var i=0; i<tempArray.length-1; i++) {
                        if(tempArray[i]>tempArray[i+1]) {
                            var tempChange = tempArray[i];
                            tempArray[i] = tempArray[i+1];
                            tempArray[i+1] = tempChange;
                            loop = 1;
                        }
                    }
                }while(loop);
                dataArray[y*width+x] = tempArray[Math.round(tempArray.length/2)];
            }
        }
        return dataArray;
    }
</script>
</html>